<template>
    <!--<div class="page_loading_box">-->
    <!--<div class="spinner3">-->
    <!--<div class="double-bounce1"></div>-->
    <!--<div class="double-bounce2"></div>-->
    <!--</div>-->
    <!--</div>-->
    <div class="container_box" id="video_box">
        <div class="van_swipe" v-if="videoList.length">
            <van-swipe :show-indicators="false" @change="onChange" vertical :loop="false" :touchable="touchable">
                <!--vant van-swipe 滑动组件 -->
                <van-swipe-item class="product_swiper" v-for="(item, index) in videoList" :key="index">
                    <div class="product_box">
                        <div class="video_container">
                            <video :id="'video'+index" class="video_box video_cont" webkit-playsinline="true"
                                   x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true"
                                   playsinline="true" preload="auto" :poster="item.low_source" :src="item.video_address"
                                   :playOrPause="playOrPause" x-webkit-airplay="allow" x5-video-orientation="portrait"
                                   @click="pauseVideo" loop="loop">
                            </video>
                            <!--<div class="play_cont" v-show="isVideoShow">-->
                                <!--<img v-show="isVideoShow" class="play play_cover" @click="playvideo"-->
                                     <!--:src="item.low_source" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'"/>-->
                            <!--</div>-->
                            <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
                                 src="http://douliu.jishiyoo.com/images/icon_play.png"/>
                        </div>
                    </div>

                    <!-- 右侧点赞、分享功能 -->
                    <div class="tools_right">
                        <div class="tools_r_li" @click="changeFollow(item,index)">
                            <i class="iconfont iconxuanchuan_icon_dianzan icon_right"
                               :class="item.is_collection_id?'follow_active':''"></i>
                            <div class="tools_r_num">{{item.collection_num}}</div>
                        </div>
                        <div class="tools_r_li" @click="changeShare">
                            <i class="iconfont iconxuanchuan_icon_fenxiang icon_right"></i>
                            <div class="tools_r_num">5.5w</div>
                        </div>
                        <div class="tools_r_li" @click="addFabu">
                            <i class="iconfont iconxuanchuan_icon_bofang icon_right"></i>
                            <div class="tools_r_num">
                                发布
                            </div>
                        </div>
                    </div>
                    <!-- 底部作品描述 -->
                    <div class="production_box">
                        <div class="production_user flex align-center">
                            <img :src=item.head_photo||defaultAvater
                                 alt=""
                                 onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'" />
                            <div class="production_user_p">
                                <p class="production_user_name"></p>
                                <p class="production_user_title">{{item.username}}</p>
                            </div>
                        </div>
                        <div class="production_des">
                            {{item.title}}
                        </div>
                    </div>
                </van-swipe-item>

            </van-swipe>
            <!--分享弹框-->
            <div class="share_hover" v-show="showShareBox" @click="cancelShare"></div>
            <div class="share_hover2"  v-show="showGiudBox" @click="showGuidWx(1)">
                <img src="../../../../assets/img/icon_share.png" class="icon_share">
            </div>
            <div class="share_box" :class="showShareBox?'share_active':''">
                <div class="share_tips">分享</div>
                <ul class="share_ul">
                    <li class="share_li"  @click="showGuidWx(0)">
                        <div><img src="../../../../assets/img/xuanchuan_fenxiang_weixin.png" alt=""></div>
                        <span>分享到微信好友</span>
                    </li>
                    <li class="share_li pengyouquan_li"  @click="showGuidWx(0)">
                        <div><img src="../../../../assets/img/xuanchuan_fenxiang_pengyouquan.png" alt=""></div>
                        <span>分享到朋友圈</span>
                    </li>
                    <li class="share_li" @click="copyUrl">
                        <div><img src="../../../../assets/img/xuanchuan_fenxiang_lianjie.png" alt=""></div>
                        <span>复制文章链接</span>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>

        </div>
        <div v-if="beginStatus" class="beginPage">
            <Loading  />
        </div>
        <div v-if="noData" class="noData">
            <span>暂无视频资源</span>
        </div>

    </div>
</template>
<script>
    let documentW = (document.documentElement.clientWidth || document.body.clientWidth);
    import {Swipe, SwipeItem} from 'vant';
    import Vue from 'vue';
    import Loading from '@/components/loading.vue';
    var wx = require('weixin-js-sdk');
    console.log(wx);
    Vue.use(Swipe).use(SwipeItem);

    export default {
        data() {
            let u = navigator.userAgent;
            return {
                current: 0,
                videoList: [],
                defaultAvater:'https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf',
                videoInfo: '',
                isVideoShow: true,
                playOrPause: true,
                video: null,
                iconPlayShow: true,
                hasFollow: 0,
                isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
                isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
                tabIndex: 0,
                showShareBox: false,
                showGiudBox:false,
                touchable: true,
                page: 1,
                size: 10,
                noData:false,
                beginStatus:true
            }
        },
        components:{
            Loading
        },
        created() {
            this.videoId = this.$route.query.id;
            this.class_id = this.$route.query.class_id;
        },
        methods: {
            //改变菜单
            changeTab(index) {
                this.tabIndex = index
            },
            addFabu() {
                //发布
                this.$router.push({
                    path: '/propaganda/videoList/fabuVideo'
                })
            },
            //提示微信转发
            showGuidWx(index) {
                if (index == 0) {
                    this.showGiudBox = true
                } else {
                    this.showGiudBox = false
                }
            },
            //改变收藏状态
            changeFollow(item, index) {
                console.log(item,index);
                this.$http.post('/app/NewCustom/collection',{
                    uid:JSON.parse(Cookies.get('user_71ydj')).id,
                    id:item.id,
                    type:2,
                    resources_type:3,
                }).then((res)=>{
                    if(res.code==200){
                        if(this.videoList[index].is_collection_id){
                            this.videoList[index].collection_num--;
                        }else{
                            this.videoList[index].collection_num++;
                        }
                        this.videoList[index].is_collection_id = !this.videoList[index].is_collection_id;
                        console.log(res)
                    }
                })
            },
            //展示分享弹窗
            changeShare() {
                this.showShareBox = true
            },
            //取消分享
            cancelShare() {
                this.showShareBox = false;
                this.showGiudBox = false;
            },
            //滑动改变播放的视频
            onChange(index) {
                //改变的时候 暂停当前播放的视频
                for (var i = 0; i < document.querySelectorAll('video').length; i++) {
                    document.querySelectorAll('video')[i].pause();
                }
                let video = document.querySelectorAll('video')[this.current];
                video.pause();
                this.playOrPause = false;
                this.current = index;
                if (this.isiOS) {
                    //ios切换直接自动播放下一个
                    this.isVideoShow = false;
                    this.pauseVideo()
                } else {
                    //安卓播放时重置显示封面。图标等
                    this.isVideoShow = true;
                    this.iconPlayShow = true
                }
                ;
                if (index == ((this.page - 1) * this.size + this.size) - 1) {
                    this.page++;
                    this.getVideoData(this.page);
                }
            },
            playvideo(event) {
                let video = document.querySelectorAll('video')[this.current];
                this.iconPlayShow = false;
                this.playOrPause = true;
                video.style.display = "";
                video.play();
                if (this.isiOS) {
                    if (video.canplaythrough) {
                        this.isVideoShow = false;
                    }
                    //获取宽比
                    let docB = parseFloat(video.videoWidth / documentW);
                    // 计算视频最适高度
                    let realH = parseInt(video.videoHeight / docB);
                    $('.video_container').height(realH);
                    // $('.video_cont').height(realH);
                    video.addEventListener('canplaythrough', () => {
                        //获取宽比
                        docB = parseFloat(video.videoWidth / documentW);
                        // 计算视频最适高度
                        realH = parseInt(video.videoHeight / docB);

                        $('.video_container').height(realH);
                        //将本视频已缓存 存个标识
                        this.currentVideo.canplaythrough = true;
                        this.isVideoShow = false;
                    });

                } else {
                    this.isVideoShow = false;
                }
//                this.actionRecord('view', this.tOpenid);
                window.onresize = function () {
                    video.style.width = window.innerWidth + "px";
                    video.style.height = window.innerHeight + "px";
                };

//                try {
//                    gtag('event', `${this.currentVideo.author}:${this.currentVideo.title}`, {
//                        'event_category': '视频',
//                        'event_label': '播放'
//                    });
//                } catch (e) {
//                }
////                //记录有效播放时间
////                clearInterval(videoEffectiveInterval)
////                this.effectivePlay(video)
//
//                //进行打卡
//                if (this.hasFollow == 0 && this.signInSource == 1) {
//                    //第一次从公众号进入，一定可以打卡
//                    this.videoSign()
//                } else {
//                    if (this.hasFollow == 0) {
//                        // if (this.isiOS) {
//                        //     this.showClockPop()
//                        // }
//                    } else {
//                        this.videoSign()
//                    }
//                }
//                let isADShop = get_cache('isADShop');
//                if (isADShop) {
//                    //如果缓存的时间小于当前时间戳，则显示广告
//                    if (parseInt(isADShop) <= (new Date() - 0)) {
//                        //展示滑动广告
//                        this.timeOutFive(video)
//                    }
//                } else {
//                    //展示滑动广告
//                    this.timeOutFive(video)
//                }
                if (!this.isiOS) {
                    this.checkAnPlay(video)
                }
            },
//            playvideo(event) {
//                let video = document.querySelectorAll('video')[this.current];
//                console.log("playvideo：" + this.current);
//                this.isVideoShow = false;
//                this.iconPlayShow = false
//                video.play();
//                window.onresize = function () {
//                    video.style.width = window.innerWidth + "px";
//                    video.style.height = window.innerHeight + "px";
//                }
//            },
//            pauseVideo() { //暂停\播放
//                let video = document.querySelectorAll('video')[this.current]
//                console.log("pauseVideo" + this.current)
//                if (this.playOrPause) {
//                    video.pause()
//                    this.iconPlayShow = true
//                } else {
//                    video.play()
//                    this.iconPlayShow = false
//                }
//                this.playOrPause = !this.playOrPause
//            },
            pauseVideo() { //暂停\播放
                // let video = document.querySelectorAll('video')[this.current]
                let video = document.querySelectorAll('video')[this.current];
                this.isVideoShow =false;
                if (this.playOrPause) {
                    video.pause();
                    //安卓暂停后需要退出全屏
                    if (!this.isiOS) {
                        let video = document.querySelectorAll('video')[this.current];
                        video.style.display = 'none'
                    }
                    this.iconPlayShow = true;
                    if (this.hasFollow == 0 && this.signInSource == 1) {
                        //第一次从公众号进入
                        if (!this.hasSignSuccess) {
                            this.signSuccess = true
                            this.hasSignSuccess = true
                        }
                    } else if (this.hasFollow == 0 && !this.signInSource == 1) {
                        //第一次分享进入并且没参与过
                    } else {
                        //参与了未打卡
                        if (!this.hasSignSuccess || this.signSuccessIndex == 0) {
                            this.signSuccess = true
                            this.hasSignSuccess = true
                            this.signSuccessIndex = 1
                        }
                    }
                    //打卡成功
                } else {
                    video.play();
                    this.iconPlayShow = false;
                    try {
                        // this.actionRecord('view');
                    } catch (e) {

                    }
                    // this.timeOutFive(video)
                }
                this.playOrPause = !this.playOrPause;
            },
            onPlayerEnded(player) { //视频结束
                // var myVideo = document.getElementById("video" + this.current);
                // myVideo.addEventListener('ended', function () {
                //     this.webkitExitFullScreen();
                // });
                this.isVideoShow = true;
                this.current += this.current
            },
            //判断安卓是否处于全屏播放
            checkAnPlay(video) {
                let that = this;
                document.addEventListener("WeixinJSBridgeReady", function () {
                    document.getElementById('video').play(); //视频自动播放
                }, false);
                video.addEventListener("x5videoexitfullscreen", function () {
                    //退出全屏
                    video.style.display = ""
                    that.isVideoShow = true;
                    that.iconPlayShow = true;
                    if (that.hasFollow == 0 && that.signInSource == 1) {
                        //第一次从公众号进入
                        if (!that.hasSignSuccess) {
                            that.signSuccess = true
                            that.hasSignSuccess = true
                        }
                    } else if (that.hasFollow == 0 && !that.signInSource == 1) {
                        //第一次分享进入并且没参与过
                    } else {
                        //参与了未打卡
                        if (!that.hasSignSuccess || that.signSuccessIndex == 0) {
                            that.signSuccess = true
                            that.hasSignSuccess = true
                            that.signSuccessIndex = 1
                        }
                    }
                    that.touchable = true;
                })
                video.addEventListener("x5videoenterfullscreen", function () {
                    //进入全屏
                    that.touchable = false
                })
            },
            //复制当前链接
            copyUrl() {
                let httpUrl = window.location.href;
                var oInput = document.createElement('input');
                oInput.value = httpUrl;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                alert("链接复制成功")
                this.cancelShare();

            },
            getVideoData(p) {
                this.$http.get('/app/NewCustom/video_list', {
                    p: p,
                    page: 10,
                    class_id: this.class_id,
                    org_id:JSON.parse(Cookies.get("user_71ydj")).organization_id,
                    uid: JSON.parse(Cookies.get('user_71ydj')).id
                }).then((res) => {
                    if (res.code == '200') {
                        this.videoList = [...this.videoInfo,...res.data, ...this.videoList];
                        if(this.videoList.length==0){
                            this.noData =true;
                        }
                        console.log(this.videoList)
                    }
                })
            },
            /*
            * 获取这个视频的详情
            * */
            getVideoInfo() {
                this.$http.get('app/My/video_info', {
                    id: this.videoId,
                    uid: JSON.parse(Cookies.get('user_71ydj')).id
                }).then((res) => {
                    if (res.code == '200') {
                        this.videoInfo = [res.data];
                        this.getVideoData(this.page);

                    }
                })
            },
        },
        mounted() {
            if (!Cookies.get('user_71ydj')) {
                this.$router.push({
                    path: '/mine'
                });
                return false
            };

            this.$progress.done();
            let that = this;
            this.getVideoInfo();
            setTimeout((()=>{
                this.beginStatus =false;
            }),500)
            //暂时关闭分享
            // $(function () {
            //     var url = encodeURIComponent(window.location.href);
            //     console.log(url)
            //     var reulut;
            //     $.post('https://bulid.71ydj.com/Share.php',
            //         {"url": url},
            //         function (result) {
            //             reulut = result;
            //             console.log(result)
            //             wx.config({
            //                 appId: reulut.appId, // 必填，公众号的唯一标识
            //                 timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            //                 nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            //                 signature: reulut.signature,// 必填，签名
            //                 jsApiList: [ // 必填，需要使用的JS接口列表
            //                     'onMenuShareAppMessage', //1.0 分享到朋友
            //                     'onMenuShareTimeline', //1.0分享到朋友圈
            //                     'updateAppMessageShareData', //1.4 分享到朋友
            //                     'updateTimelineShareData' //1.4分享到朋友圈
            //                 ]
            //             });
            //             wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            //                 wx.updateAppMessageShareData({
            //                     title: '七一云yi介绍', // 分享标题
            //                     desc: '喜迎七一，用七一云党建平台向党献礼', // 分享描述
            //                     link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //                     imgUrl: 'https://media.71ydj.com/Fi4Gve-kFIe99OEToHs4NSUhz2NA', // 分享图标
            //                 });
            //                 wx.updateTimelineShareData({
            //                     title: '七一云党建平台介绍', // 分享标题
            //                     link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //                     imgUrl: 'https://media.71ydj.com/Fi4Gve-kFIe99OEToHs4NSUhz2NA', // 分享图标
            //                 });
            //             });
            //
            //         }
            //     );
            // });
        }
    }
</script>
<style scoped>
    .clear {
        clear: both;
    }

    .video-player {
        height: 100vh;
        width: 100%;
    }

    .swiper-container, .swiper-wrapper {
        height: 100vh;
    }

    .product_swiper {
        width: 100%;
        height: 100%;
    }

    .van_swipe {
        width: 100%;
        height: 100vh;
    }

    .van-swipe {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }

    .container_box {
        width: 100%;
        height: 100vh;
        z-index: 999;
    }

    .video_box {
        object-position: 50% 50%;
        /*object-fit: fill !important;*/
        z-index: 999;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.7);
    }

    video {
        /*object-position: 0 0;*/
    }

    .icon_play {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        bottom: auto;
        margin: auto;
        z-index: 999;
        width: 64px;
        height: 64px;
        margin-top: -32px;
        color: rgba(255, 255, 255, 0.4);
        /*border-radius: 50%;*/
    }

    .play,
    .platStart {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
    }

    /* 点赞，转发 */
    .tools_right {
        z-index: 1001;
        position: absolute;
        right: 16px;
        bottom: 238px
    }

    .tools_r_li {
        margin-bottom: 20px;
        color: #fff;
        font-size: 14px;
        position: relative;
    }
    .tools_r_li .tools_r_num{
        text-align: center;
    }
    .tools_r_li:last-child {
        margin-bottom: 0px;
    }

    .tools_r_li input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .icon_right {
        margin-bottom: 5px;
        font-size: 32px;
        display: block;
        /*transition: .5s;*/
    }

    .production_box {
        z-index: 1001;
        position: absolute;
        /* right: 16px; */
        bottom: 60px;
        text-align: left;
        padding: 0 15px 15px 15px;
        color: #fff;
        width: 100%;
        left: 0;
        box-sizing: border-box;
        /*background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /* 标准的语法 */
    }

    .production_name {
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .production_des {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-height: 62px;
        font-size: 14px;
        color: white;
    }

    .container_bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.2);
        height: 60px;
        border-top: 1px solid rgba(255, 255, 255, 0.7);
    }

    .production_top {
        display: inline-block;
        padding: 6px;
        margin-bottom: 5px;
        background: rgba(0, 0, 0, .3);
        border-radius: 6px;
        margin-top: 5px;
    }

    .product_go {
        color: #fbdd21;
    }

    .production_title {
        margin-left: 4px;
    }

    .bottom_tab {
        width: 50%;
        text-align: center;
        float: left;
        color: #c9c9c9;
        padding: 10px 0;
    }

    .bottom_tab_span {
        line-height: 38px;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        font-size: 16px;
        display: inline-block;
        padding: 0 4px;
        transition: .5s all;
    }

    .tab_active .bottom_tab_span {
        border-bottom: 2px solid #fff;
        color: #fff;
    }

    .icon-shoucang {
        transition: .5s all;
    }

    .follow_active {
        color: #f44;
        animation: showHeart .5s ease-in-out 0s;
    }

    /*animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致*/
    /*animation-duration ：指定元素播放动画所持续的时间*/
    /*animatino-timing-function ： 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。*/
    /*animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画*/
    /*animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。*/
    /*animation-direction：主要用来设置动画播放方向*/
    @keyframes showHeart {
        0% {
            color: #f44;
            transform: scale(1);
        }
        25% {
            color: #fff;
            transform: scale(0);
        }
        80% {
            color: #f44;
            transform: scale(1.2);
        }
        100% {
            color: #f44;
            transform: scale(1);
        }
    }

    /*分享样式*/

    .share_hover {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 1000;
        top: 0;
        left: 0;
    }
    .share_hover2 {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 1001;
        top: 0;
        left: 0;
    }

    .icon_share {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        animation: shareGuid 2s linear infinite;
    }

    @keyframes shareGuid {
        0% {
            top: 0;
            right: 0;
        }
        50% {
            top: 35px;
            right: 35px;
        }
        100% {
            top: 0;
            right: 0;
        }
    }
    .share_box {
        position: fixed;
        z-index: 1002;
        background: #fff;
        transition: .5s;
        width: 100%;
        height: 206px;
        border-radius:6px 6px 0 0;
        bottom: -300px;
    }

    .share_box.share_active {
        transform: translateY(-300px);
    }

    .share_tips {
        text-align: center;
        color: #333;
        font-size: 16px;
        margin: 21px 0;
    }

    .share_ul {
        box-sizing: border-box;
        padding: 0 25px 5px;
    }

    .share_li {
        float: left;
        width: 33%;
        text-align: center;
    }

    .share_li div {
        width: 55px;
        height: 55px;
        margin: 0 auto;
        border: 1px solid #DDDDDD;
        border-radius: 50%;
    }

    .share_li img {
        width: 28px;
        height: 27px;
        display: flex;
        margin: 14px auto;
    }

    .share_li span {
        font-size: 12px;
        color: #666;
        display: inline-block;
        width: 52px;
        margin-top: 10px;
    }

    @keyframes rotating {
        from {
            transform: rotate(0)
        }
        to {
            transform: rotate(360deg)
        }
    }

    .production_user {
        font-size: 16px;
        color: white;
        margin-bottom: 21px;
    }

    .production_user img {
        width: 35px;
        height: 35px;
        margin-right: 13px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .production_user .production_user_p .production_user_name {
        font-size: 16px;
        font-weight: bold;
        color: white;
    }

    .production_user .production_user_p .production_user_title {
        font-size: 12px;
        color: #fff;
    }

    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .align-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .flex-1 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        height: 100%;
    }

    .play_cont {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-flex;
        display: flex;
        background: rgba(0, 0, 0, 0.7);
    }

    .play {
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: auto;
    }

    .loading {
        position: relative;
        background: none;
        width: 27px;
        height: 27px;
        margin: 0 auto;
    }

    .loading > div {
        position: absolute;
        border-radius: 2px;
        background: #000;
        top: 13px;
        left: 13px;
        width: 3px;
        height: 8px;
        -webkit-animation: loading-anim 1s linear infinite;
        animation: loading-anim 1s linear infinite;
    }

    .loading.loading_white > div {
        background: #fff;
    }

    .loading > div:nth-of-type(1) {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
        -webkit-transform: rotate(0deg) translate(0, -12px);
        transform: rotate(0deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(2) {
        -webkit-animation-delay: -0.417s;
        animation-delay: -0.417s;
        -webkit-transform: rotate(30deg) translate(0, -12px);
        transform: rotate(30deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(3) {
        -webkit-animation-delay: -0.333s;
        animation-delay: -0.333s;
        -webkit-transform: rotate(60deg) translate(0, -12px);
        transform: rotate(60deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(4) {
        -webkit-animation-delay: -0.25s;
        animation-delay: -0.25s;
        -webkit-transform: rotate(90deg) translate(0, -12px);
        transform: rotate(90deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(5) {
        -webkit-animation-delay: -0.167s;
        animation-delay: -0.167s;
        -webkit-transform: rotate(120deg) translate(0, -12px);
        transform: rotate(120deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(6) {
        -webkit-animation-delay: -0.0833s;
        animation-delay: -0.0833s;
        -webkit-transform: rotate(150deg) translate(0, -12px);
        transform: rotate(150deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(7) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-transform: rotate(180deg) translate(0, -12px);
        transform: rotate(180deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(8) {
        -webkit-animation-delay: 0.083s;
        animation-delay: 0.083s;
        -webkit-transform: rotate(210deg) translate(0, -12px);
        transform: rotate(210deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(9) {
        -webkit-animation-delay: 0.167s;
        animation-delay: 0.167s;
        -webkit-transform: rotate(240deg) translate(0, -12px);
        transform: rotate(240deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(10) {
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
        -webkit-transform: rotate(270deg) translate(0, -12px);
        transform: rotate(270deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(11) {
        -webkit-animation-delay: 0.333s;
        animation-delay: 0.333s;
        -webkit-transform: rotate(300deg) translate(0, -12px);
        transform: rotate(300deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(12) {
        -webkit-animation-delay: 0.417s;
        animation-delay: 0.417s;
        -webkit-transform: rotate(330deg) translate(0, -12px);
        transform: rotate(330deg) translate(0, -12px);
    }
    .beginPage{
        width: 100%;
        height: 100%;
        font-size: 32px;
        color: white;
        text-align: center;
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0);
        -webkit-box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba
    }
    .noData {
        width: 100%;
        height: 100%;
        font-size: 32px;
        color: white;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
    }

    .noData span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 38px;
        font-size: 24px;
    }

    @-webkit-keyframes loading-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    @keyframes loading-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
</style>